<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>定位 : z-index </title>
        <style type="text/css">
            body { background-color: #f4f4f4 ;  }
            .wrapper {
                position: relative ; /* 仅仅是为了让子元素能够参照自己进行定位而已 */
                border: 2px solid #1e9fff ;
                height: 50px ;
                border-radius: 5px ;
            }

            .wrapper .progress {
                height: 50px ;
                background-color: rgba(30, 159, 255, 0.75);
                width: 50% ;
                position:  absolute ;
                left:  0 ;
                top : 0 ;
                z-index: 10 ;
                border-radius: 5px ;
            }

            .wrapper .title {
                width: 100% ;
                height: 50px ;
                line-height: 50px ;
                text-align: center ;
                position:  absolute ;
                left:  0 ;
                top : 0 ;
                z-index: 100 ;
            }
        </style>
    </head>
    <body>

        <div class="wrapper">
            <div class="title">50%</div>
            <div class="progress"></div>
        </div>
        
    </body>
</html>